<!-- 
    用户注册页面
-->
<template>
    <div class="register-container">
        <div class="register-box">
            <div class="register-header">
                <h1 class="register-title">用户注册</h1>
                <p class="register-subtitle">创建您的账号</p>
            </div>

            <div class="register-form">
                <div class="form-group">
                    <label class="form-label">用户名</label>
                    <div class="input-wrapper">
                        <i class="input-icon">👤</i>
                        <input type="text" class="form-input" placeholder="请输入用户名" v-model="registerForm.username"
                            @blur="validateUsername" />
                    </div>
                    <span v-if="errors.username" class="error-message">{{ errors.username }}</span>
                </div>

                <div class="form-group">
                    <label class="form-label">邮箱</label>
                    <div class="input-wrapper">
                        <i class="input-icon">📧</i>
                        <input type="email" class="form-input" placeholder="请输入邮箱地址" v-model="registerForm.email"
                            @blur="validateEmail" />
                    </div>
                    <span v-if="errors.email" class="error-message">{{ errors.email }}</span>
                </div>

                <div class="form-group">
                    <label class="form-label">手机号</label>
                    <div class="input-wrapper">
                        <i class="input-icon">📱</i>
                        <input type="tel" class="form-input" placeholder="请输入手机号" v-model="registerForm.phone"
                            @blur="validatePhone" />
                    </div>
                    <span v-if="errors.phone" class="error-message">{{ errors.phone }}</span>
                </div>

                <div class="form-group">
                    <label class="form-label">密码</label>
                    <div class="input-wrapper">
                        <i class="input-icon">🔒</i>
                        <input :type="showPassword ? 'text' : 'password'" class="form-input" placeholder="请输入密码"
                            v-model="registerForm.password" @blur="validatePassword" />
                        <button type="button" class="password-toggle" @click="togglePassword">
                            {{ showPassword ? '👁️' : '👁️‍🗨️' }}
                        </button>
                    </div>
                    <span v-if="errors.password" class="error-message">{{ errors.password }}</span>
                </div>

                <div class="form-group">
                    <label class="form-label">确认密码</label>
                    <div class="input-wrapper">
                        <i class="input-icon">🔐</i>
                        <input :type="showConfirmPassword ? 'text' : 'password'" class="form-input"
                            placeholder="请再次输入密码" v-model="registerForm.confirmPassword"
                            @blur="validateConfirmPassword" />
                        <button type="button" class="password-toggle" @click="toggleConfirmPassword">
                            {{ showConfirmPassword ? '👁️' : '👁️‍🗨️' }}
                        </button>
                    </div>
                    <span v-if="errors.confirmPassword" class="error-message">{{ errors.confirmPassword }}</span>
                </div>

                <div class="form-options">
                    <label class="checkbox-wrapper">
                        <input type="checkbox" v-model="registerForm.agreeTerms" />
                        <span class="checkbox-text">我已阅读并同意</span>
                    </label>
                    <a href="#" class="terms-link">《用户协议》</a>
                </div>

                <button class="register-btn" @click="handleRegister" :disabled="!isFormValid || isLoading">
                    {{ isLoading ? '注册中...' : '立即注册' }}
                </button>

                <!-- <div class="divider">
                    <span class="divider-text">或</span>
                </div>

                <div class="social-register">
                    <button class="social-btn wechat">
                        <span class="social-icon">💬</span>
                        微信注册
                    </button>
                    <button class="social-btn dingtalk">
                        <span class="social-icon">📱</span>
                        钉钉注册
                    </button>
                </div> -->
            </div>

            <div class="register-footer">
                <p>已有账号？<span @click="toLogin" class="login-link">立即登录</span></p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const R = ref(router)

const toLogin = () => {
    R.value.push('/login')
}

// 响应式数据
const showPassword = ref(false)
const showConfirmPassword = ref(false)
const isLoading = ref(false)

const registerForm = reactive({
    username: '',
    email: '',
    phone: '',
    password: '',
    confirmPassword: '',
    agreeTerms: false
})

const errors = reactive({
    username: '',
    email: '',
    phone: '',
    password: '',
    confirmPassword: ''
})

// 计算属性：表单是否有效
const isFormValid = computed(() => {
    return registerForm.username &&
        registerForm.email &&
        registerForm.phone &&
        registerForm.password &&
        registerForm.confirmPassword &&
        registerForm.agreeTerms &&
        !errors.username &&
        !errors.email &&
        !errors.phone &&
        !errors.password &&
        !errors.confirmPassword
})

// 切换密码显示/隐藏
const togglePassword = () => {
    showPassword.value = !showPassword.value
}

const toggleConfirmPassword = () => {
    showConfirmPassword.value = !showConfirmPassword.value
}

// 验证用户名
const validateUsername = () => {
    if (!registerForm.username) {
        errors.username = '请输入用户名'
    } else if (registerForm.username.length < 3) {
        errors.username = '用户名至少3个字符'
    } else if (registerForm.username.length > 20) {
        errors.username = '用户名不能超过20个字符'
    } else {
        errors.username = ''
    }
}

// 验证邮箱
const validateEmail = () => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!registerForm.email) {
        errors.email = '请输入邮箱地址'
    } else if (!emailRegex.test(registerForm.email)) {
        errors.email = '请输入有效的邮箱地址'
    } else {
        errors.email = ''
    }
}

// 验证手机号
const validatePhone = () => {
    const phoneRegex = /^1[3-9]\d{9}$/
    if (!registerForm.phone) {
        errors.phone = '请输入手机号'
    } else if (!phoneRegex.test(registerForm.phone)) {
        errors.phone = '请输入有效的手机号'
    } else {
        errors.phone = ''
    }
}

// 验证密码
const validatePassword = () => {
    if (!registerForm.password) {
        errors.password = '请输入密码'
    } else if (registerForm.password.length < 6) {
        errors.password = '密码至少6个字符'
    } else if (registerForm.password.length > 20) {
        errors.password = '密码不能超过20个字符'
    } else {
        errors.password = ''
    }
    // 如果确认密码已输入，重新验证
    if (registerForm.confirmPassword) {
        validateConfirmPassword()
    }
}

// 验证确认密码
const validateConfirmPassword = () => {
    if (!registerForm.confirmPassword) {
        errors.confirmPassword = '请确认密码'
    } else if (registerForm.password !== registerForm.confirmPassword) {
        errors.confirmPassword = '两次输入的密码不一致'
    } else {
        errors.confirmPassword = ''
    }
}

// 处理注册
const handleRegister = async () => {
    // 验证所有字段
    validateUsername()
    validateEmail()
    validatePhone()
    validatePassword()
    validateConfirmPassword()

    if (!isFormValid.value) {
        alert('请完善注册信息')
        return
    }

    if (!registerForm.agreeTerms) {
        alert('请同意用户协议')
        return
    }

    isLoading.value = true

    try {
        // 模拟注册请求
        await new Promise(resolve => setTimeout(resolve, 2000))

        console.log('注册信息:', registerForm)
        alert('注册成功！')

        // 注册成功后跳转到登录页
        router.push('/login')

    } catch (error) {
        console.error('注册失败:', error)
        alert('注册失败，请重试')
    } finally {
        isLoading.value = false
    }
}
</script>

<style scoped>
.register-container {
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
}

.register-box {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    padding: 40px;
    width: 100%;
    max-width: 450px;
    animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.register-header {
    text-align: center;
    margin-bottom: 30px;
}

.register-title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin: 0 0 8px 0;
}

.register-subtitle {
    color: #666;
    font-size: 14px;
    margin: 0;
}

.register-form {
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 12px;
    font-size: 16px;
    color: #999;
    z-index: 1;
}

.form-input {
    width: 100%;
    padding: 12px 12px 12px 40px;
    border: 2px solid #e1e5e9;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.form-input:focus {
    outline: none;
    border-color: #667eea;
    background: white;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-input.error {
    border-color: #f44336;
}

.password-toggle {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: #999;
    padding: 0;
}

.password-toggle:hover {
    color: #667eea;
}

.error-message {
    display: block;
    color: #f44336;
    font-size: 12px;
    margin-top: 5px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-options {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    gap: 5px;
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.checkbox-wrapper input[type="checkbox"] {
    margin-right: 8px;
    width: 16px;
    height: 16px;
    accent-color: #667eea;
}

.checkbox-text {
    font-size: 14px;
    color: #666;
}

.terms-link {
    font-size: 14px;
    color: #667eea;
    text-decoration: none;
    transition: color 0.3s ease;
}

.terms-link:hover {
    color: #5a6fd8;
}

.register-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.register-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}

.register-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.divider {
    position: relative;
    text-align: center;
    margin: 20px 0;
}

.divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e1e5e9;
}

.divider-text {
    background: white;
    padding: 0 15px;
    color: #999;
    font-size: 14px;
}

.social-register {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.social-btn {
    flex: 1;
    padding: 12px;
    border: 2px solid #e1e5e9;
    background: white;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    color: #666;
}

.social-btn:hover {
    border-color: #667eea;
    color: #667eea;
    transform: translateY(-1px);
}

.social-btn.wechat:hover {
    border-color: #07c160;
    color: #07c160;
}

.social-btn.dingtalk:hover {
    border-color: #0089ff;
    color: #0089ff;
}

.social-icon {
    font-size: 16px;
}

.register-footer {
    text-align: center;
    color: #666;
    font-size: 14px;
}

.login-link {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.login-link:hover {
    color: #5a6fd8;
}

/* 响应式设计 */
@media (max-width: 480px) {
    .register-box {
        padding: 30px 20px;
        margin: 10px;
    }

    .register-title {
        font-size: 24px;
    }

    .social-register {
        flex-direction: column;
    }

    .form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}
</style>
